<!-- Author:Rain -->

<template>
    <div class="rain-form-item">
        <div class="rain-item-lable">
            <span>{{ title }}</span>
        </div>
        <div class="rain-item-content">
            <input class="rain-target" :placeholder="placeholder" type="text" v-model="selectVal" />
            <el-tooltip class="box-item" effect="dark" content="去选择" placement="top">
                <i @click='centerDialogVisible = true' class="input-icon rain-iconfont">&#xe64d;</i>
            </el-tooltip>
        </div>
    </div>

    <el-dialog v-model="centerDialogVisible" :title="type == 'pos' ? '请选择你期望的职位' : '请选择你期望的工作城市'" width="800" height="400"
        align-center>
        <section class="antd-jobs-model-container">
            <div class="antd-jobs-list-wrap" id="antd-jobs-list-wrap">
                <div class="antd-job-menu">
                    <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-light" role="menu" tabindex="0">
                        <li @click="vocationIndex = index" v-for="item, index in searchData" :key="index"
                            :class="{ 'ant-menu-item-selected': index == vocationIndex }"
                            class="ant-menu-item ant-menu-item-only-child" :title="item.title" role="menuitem"
                            tabindex="-1" style="padding-left: 24px;"><span class="ant-menu-title-content"><span
                                    class="ant-menu-text">{{ item.title }}</span></span>
                        </li>
                    </ul>
                </div>
                <div class="antd-job-box">
                    <div class="antd-item-box clearfix">
                        <div class="antd-item-list" v-for="item, index in searchData[vocationIndex].labels" :key="index">
                            <div :title="item.label" class="item">{{ item.label }}</div>
                            <span class="drop-box-item" v-for="it, i in item.list" :key="i">
                                <span @click="getVal(it as string)" :title="it" class="ant-tag"
                                    :class="{ 'itselect': selectVal == it }">{{ it }}</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </el-dialog>
</template>

<script setup lang="ts" name="rain-input">
import { getLocation, getPosition } from "@/api/mock"
//控制对话框的隐藏显示状态！！！
const centerDialogVisible = ref(false)
let props = defineProps(["placeholder", "title", "value", "type"])
let emit = defineEmits(["sendInput"])
const { value } = markRaw(props)



//判断是职位还是城市地点
if (props.type == "pos") {
    getJSON(getPosition)
} else if (props.type == "city") {
    getJSON(getLocation)
}
let searchData: any = []//静态的数据
function getJSON(fn: Function) {
    const promise: Promise<any> = fn()
    promise.then(val => {
        searchData = val
    }).catch(err => {
        console.log(err);
    })
}



// 维护一个索引值
let vocationIndex = ref(0)
//最终获取到的值
let selectVal = ref(value)
function getVal(val: string) {
    selectVal.value = val
    //要准备关闭了
    centerDialogVisible.value = false
}

watch(selectVal, (val) => {
    //用事件监听器
    emit("sendInput", val)
})

</script>

<style scoped>
@import url("./css/formitems.css");

.antd-jobs-model-container #antd-jobs-list-wrap,
.antd-jobs-model-container .antd-jobs-list-wrap {
    display: flex;
}

.antd-jobs-model-container *,
.antd-jobs-model-container :after,
.antd-jobs-model-container :before {
    box-sizing: border-box !important;
}

/* 左侧菜单栏 */
.antd-jobs-model-container #antd-jobs-list-wrap .antd-job-menu,
.antd-jobs-model-container .antd-jobs-list-wrap .antd-job-menu {
    width: 225px;
    min-width: 225px;
}

.antd-jobs-model-container #antd-jobs-list-wrap .antd-job-menu .ant-menu,
.antd-jobs-model-container .antd-jobs-list-wrap .antd-job-menu .ant-menu {
    width: 225px;
    min-width: 225px;
    height: 386px;
    max-height: 386px;
    padding: 13px 10px 13px 15px;
    overflow-y: scroll;
    overflow-x: hidden;
    border-right: 1px solid #ddd;
    color: #000;
}

.antd-jobs-model-container #antd-jobs-list-wrap .antd-job-menu .ant-menu .ant-menu-item,
.antd-jobs-model-container .antd-jobs-list-wrap .antd-job-menu .ant-menu .ant-menu-item {
    border-radius: 8px;
    padding-left: 12px !important;
    margin-bottom: 5px;
    margin-top: 0;
    height: 32px;
    line-height: 32px;
    cursor: pointer;
}

.ant-menu-inline.ant-menu-root .ant-menu-item,
.ant-menu-inline.ant-menu-root .ant-menu-submenu-title {
    display: flex;
    align-items: center;
    transition: border-color .3s, padding .1s cubic-bezier(.215, .61, .355, 1);
}

.antd-jobs-model-container #antd-jobs-list-wrap .antd-job-menu .ant-menu .ant-menu-text,
.antd-jobs-model-container .antd-jobs-list-wrap .antd-job-menu .ant-menu .ant-menu-text {
    font-size: 14px;
    color: #222;
}

.antd-jobs-model-container #antd-jobs-list-wrap .antd-job-menu .ant-menu-item:hover,
.antd-jobs-model-container .antd-jobs-list-wrap .antd-job-menu .ant-menu-item:hover {
    color: #000;
    background: #f5f7fa;
    font-weight: 600;
}

.antd-jobs-model-container #antd-jobs-list-wrap .antd-job-menu .ant-menu .ant-menu-item-selected,
.antd-jobs-model-container .antd-jobs-list-wrap .antd-job-menu .ant-menu .ant-menu-item-selected {
    color: #000;
    background: #f5f7fa;
    font-weight: 600;
}

/* 右侧选项 */
.antd-jobs-model-container #antd-jobs-list-wrap .antd-job-box,
.antd-jobs-model-container .antd-jobs-list-wrap .antd-job-box {
    height: 396px;
    max-height: 396px;
    width: 100%;
    overflow-y: hidden;
    padding-left: 24px;
    position: relative;
}

.antd-jobs-model-container #antd-jobs-list-wrap .antd-job-box .antd-item-box,
.antd-jobs-model-container .antd-jobs-list-wrap .antd-job-box .antd-item-box {
    padding: 8px 0 60px;
    max-height: 432px;
    overflow-y: auto;
    overflow-x: hidden;
}

.antd-jobs-model-container #antd-jobs-list-wrap .antd-job-box .antd-item-box .item,
.antd-jobs-model-container .antd-jobs-list-wrap .antd-job-box .antd-item-box .item {
    color: #000;
    line-height: 20px;
    font-size: 14px;
    margin: 12px 0 16px;
}

.antd-jobs-model-container #antd-jobs-list-wrap .antd-job-box .antd-item-box .drop-box-item,
.antd-jobs-model-container .antd-jobs-list-wrap .antd-job-box .antd-item-box .drop-box-item {
    display: inline-block;
    margin-bottom: 12px;
}

.antd-jobs-model-container #antd-jobs-list-wrap .antd-job-box .antd-item-box .drop-box-item .ant-tag,
.antd-jobs-model-container .antd-jobs-list-wrap .antd-job-box .antd-item-box .drop-box-item .ant-tag {
    font-size: 14px;
    background: #f8f9fb;
    border: 1px solid #f8f9fb;
    color: #333;
    border-radius: 6px;
    line-height: 20px;
    padding: 5px 16px;
    display: inline-flex;
    margin-right: 16px;
    transition: none;
    align-items: center;
    cursor: pointer;
}

.antd-jobs-model-container #antd-jobs-list-wrap .antd-job-box .antd-item-box .drop-box-item .ant-tag.itselect,
.antd-jobs-model-container .antd-jobs-list-wrap .antd-job-box .antd-item-box .drop-box-item .ant-tag.itselect {
    color: RGB(237, 105, 105);
    background-color: RGBA(200, 133, 132, 0.2);
    border: 1px solid red;
    box-sizing: border-box;
}
</style>